<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon bg-primary">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">总用户数</div>
              <div class="stat-value">{{ stats.userCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon bg-success">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">总资料数</div>
              <div class="stat-value">{{ stats.materialCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon bg-warning">
              <el-icon><Download /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">总下载量</div>
              <div class="stat-value">{{ stats.downloadCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon bg-danger">
              <el-icon><Coin /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-title">总收入</div>
              <div class="stat-value">¥{{ stats.totalIncome }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>近30天收入趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <IncomeChart :data="incomeData" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>资料分类分布</span>
            </div>
          </template>
          <div class="chart-container">
            <CategoryChart :data="categoryData" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDashboardStats } from '@/api/admin'
import IncomeChart from '@/components/charts/IncomeChart.vue'
import CategoryChart from '@/components/charts/CategoryChart.vue'
import { User, Document, Download, Coin } from '@element-plus/icons-vue'

const stats = ref({
  userCount: 0,
  materialCount: 0,
  downloadCount: 0,
  totalIncome: 0
})

const incomeData = ref([])
const categoryData = ref([])

// 获取统计数据
const loadStats = async () => {
  try {
    const res = await getDashboardStats()
    stats.value = res.data.stats
    incomeData.value = res.data.incomeTrend
    categoryData.value = res.data.categoryDistribution
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon .el-icon {
  font-size: 28px;
  color: white;
}

.bg-primary {
  background-color: #409EFF;
}

.bg-success {
  background-color: #67C23A;
}

.bg-warning {
  background-color: #E6A23C;
}

.bg-danger {
  background-color: #F56C6C;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.card-header {
  font-weight: bold;
}

.chart-container {
  height: 300px;
}

.mt-20 {
  margin-top: 20px;
}
</style>